<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="45px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="query.provinceId" :name.sync="query.provinceName"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="query.cityId" :province="query.provinceId" :name.sync="query.cityName"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="query.areaId" :city="query.cityId" :name.sync="query.areaName"></region>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" >
                <div class="charts-title">分时活跃趋势</div>
                <div class="charts-display" v-loading='trendChart1Loading'>
                    <trendChart width='100%' height='100%' id="trendChart1" :option='trendChart1Option'></trendChart>
                </div>
            </div>
            <div slot="eCharts2" >
                <div class="charts-title">各角色活跃趋势</div>
                <div class="charts-display" v-loading='trendChart2Loading'>
                   <trendChart width='100%' height='100%' id="trendChart2" :option='trendChart2Option'></trendChart>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import trendChart from 'components/Charts/trendChart';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import { userActiveByHourAnalysis, userTypeActiveByDayAnalysis} from 'api/pingtaifenxi';
    
    export default{
        name: 'userActivityView',
        components: {trendChart, province, city, region, echartsLayout},
        data() {
            return {
                trendChart1Loading: false,
                trendChart2Loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: false,
                eCharts3State: true,
                chartsListState: true,
                tableState: true,
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    provinceName: '',
                    cityName: '',
                    areaName: ''
                },
                trendChart1Option: null,
                trendChart2Option: null,
                filterList: null
            }
        },
        computed: {
        },
        created() {
            this.getTrendChart1();
            this.getTrendChart2();
        },
        methods: {
            submit() {
                this.getTrendChart1();
                this.getTrendChart2();
            },

            // 分时活跃趋势
            getTrendChart1() {
                this.trendChart1Loading = true;
                let provinceName = this.query.provinceName, 
                    cityName = this.query.cityName, 
                    areaName = this.query.areaName, 
                    provinceId = this.query.provinceId, 
                    cityId = this.query.cityId, 
                    areaId = this.query.areaId,
                    date1 = moment(new Date()).add(-1, 'days').format('YYYY-MM-DD'),
                    date7 = moment(new Date()).add(-7, 'days').format('YYYY-MM-DD'),
                    date30 = moment(new Date()).add(-30, 'days').format('YYYY-MM-DD');
                userActiveByHourAnalysis(date1, date7, date30, provinceName, cityName, areaName, provinceId, cityId, areaId).then(res => {
                    this.trendChart1Loading = false;
                    let xAxisDataList=['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'];
                    let dataList1=[];
                    let dataList2=[];
                    let dataList3=[];
                    res.data.content.forEach(val => {
                        if (val.date==date1) {
                            if (val.data) {
                                for (let value of Object.values(val.data[0])) {
                                    dataList1.push(value)
                                }
                            } else {
                                dataList1.length=24;
                                dataList1.fill(0)
                            }
                        }
                        if (val.date==date7) {
                            if (val.data) {
                                for (let value7 of Object.values(val.data[0])) {
                                    dataList2.push(value7)
                                }
                            } else {
                                dataList2.length=24;
                                dataList2.fill(0)
                            }
                        }
                        if (val.date==date30) {
                            if (val.data) {
                                for (let value30 of Object.values(val.data[0])) {
                                    dataList3.push(value30)
                                }
                            } else {
                                dataList3.length=24;
                                dataList3.fill(0)
                            }
                        }
                      
                    });
                    this.trendChart1Option = {
                        color: ['#DB77D8', '#4488BB', '#FF7F50'],
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['昨天', '7天前', '30天前']
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: xAxisDataList // data.xAxisData // ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '昨天',
                                type: 'line',
                                data: dataList1 // data.dataList[0]?data.dataList[0].data:[0] 
                            },
                            {
                                name: '7天前',
                                type: 'line',
                                data: dataList2 // data7.dataList[0]?data7.dataList[0].data:[0] 
                            },
                            {
                                name: '30天前',
                                type: 'line',
                                data: dataList3 // data30.dataList[0]?data30.dataList[0].data:[0] 
                            }
                        ]
                    };
                }).catch(() => {
                    this.trendChart1Loading = false;
                })
            },

            // 各角色活跃趋势
            getTrendChart2() {
                this.trendChart2Loading = true;
                let endDate = moment(new Date()).add(-1, 'days').format('YYYY-MM-DD'), // 昨天
                    startDate = moment(new Date()).add(-30, 'days').format('YYYY-MM-DD'), // 30天
                    provinceName = this.query.provinceName, 
                    cityName = this.query.cityName, 
                    areaName = this.query.areaName, 
                    provinceId = this.query.provinceId, 
                    cityId = this.query.cityId, 
                    areaId = this.query.areaId;
                userTypeActiveByDayAnalysis(startDate, endDate, provinceName, cityName, areaName, provinceId, cityId, areaId).then(res => {
                    this.trendChart2Loading = false;
                    let xAxisData=[];
                    let parList=[];
                    let teaList=[];
                    let stuList=[];
                    let dataList=res.data.content.reverse();
                    dataList.forEach(val => {
                        xAxisData.push(val.date)
                        parList.push(val.number.parentNumber==null?0:val.number.parentNumber)
                        teaList.push(val.number.teacherNumber==null?0:val.number.teacherNumber)
                        stuList.push(val.number.studentNumber==null?0:val.number.studentNumber)
                    })
                    this.trendChart2Option = {
                        color: ['#FCCE10', '#B5C334', '#C1232B', '#FF7F50'],
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['家长', '教师', '学生']
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: xAxisData  
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '家长',
                                type: 'line',
                                data: parList // data.dataList[0]?data.dataList[0].data:[0] 
                            },
                            {
                                name: '教师',
                                type: 'line',
                                data: teaList // data7.dataList[0]?data7.dataList[0].data:[0] 
                            },
                            {
                                name: '学生',
                                type: 'line',
                                data: stuList // data30.dataList[0]?data30.dataList[0].data:[0] 
                            }
                        ]
                    };
                }).catch(() => {
                    this.trendChart2Loading = false;
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     